<template>
  <a-modal
    title="添加新的分组"
    :visible="visible"
    @ok="addGroup"
    @cancel="$emit('close')"
    okText="确认"
    cancelText="取消"
    :mask="false"
  >
    <a-form>
      <a-form-item
        label="新添加分组名称"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 14 }"
      >
        <el-input size="small" v-model="groupName" placeholder="请输入新分组名称" />
        <p style="color:#FFF;">如果该分组下无新增视点，则不会被保存</p>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
export default {
  name: "addGroup",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      groupName: undefined,
    };
  },
  methods: {
    addGroup() {
      //判断视点组名称是否为null，undefined，只有空格
      if(!this.groupName||this.groupName.replace(/ /g,"")==""){
        this.$message({
          message: "视点组名称不能为空!",
          type: 'warning'
        });
        return;
      }
      this.$emit("close");
      this.$emit("addGroup", this.groupName);
    },
  },
};
</script>
<style scoped></style>
